<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.active {
			border: 1px solid red;
			width: 100px;
			height: 100px;
		}
		.error {
			background-color: orange;
		}
		.test {
			color: blue;
		}
		.base {
			font-size: 28px;

		}
	</style>
</head>
<body>
	<div id="app">
		<div v-bind:style='{border: borderStyle, width: widthStyle, height: heightStyle}'></div>
    	<div v-bind:style='objStyles'></div>
    	<div v-bind:style='[objStyles, overrideStyles]'></div>
    	<button v-on:click='handle'>切换</button>

    </div>
<script type="text/javascript" src="js/vue.js"></script>
	<script type="text/javaScript">
		/*
			教训： 就是排查vue的错误的时候，要经常使用调试工具查看错误
			样式绑定之内联样式style：
				对象语法：
				数组语法：
		*/
	var vm = new Vue({
			el: "#app",
			data: {
				borderStyle: '1px solid #000',
				widthStyle: '100px',
				heightStyle: '200px',
				objStyles: {
					border: '1px solid green',
					width: '200px',
					height: '100px'
				},
				overrideStyles: {
					border: '5px solid orange',
					backgroundColor: 'blue'
				}
			},
			methods: {
				handle: function() {
					this.heightStyle = '100px';
					this.objStyles.width = '100px';
				}
			}
					
			
		})
	</script>
	</body> 
</html>
